import { defineComponent, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {
  ElCard,
  ElSpace,
  ElButton,
  ElFormItem,
  ElSelect,
  ElOption,
  ElDatePicker
} from 'element-plus'

import type { InfoValuesType } from './typings'
import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'
import type { fnStateEnum } from '~/store/monitor/typings'

import AliIcon from '~/components/AliIocn'
import styles from '../../index.module.scss'
import ProSaasTable from '~/components/ProSaasTable'
import useVuexGetters from '~/hooks/useVuexGetters'
import ColorfulBadge from '~/components/ColorfulBadge'

export default defineComponent(function Demo() {
  const router = useRouter()
  const proSaasTableRef = ref<ProSaasTableExposeType>()
  const formValues = reactive<InfoValuesType>({})
  const equipmentState = useVuexGetters('equipment', [
    'communicationStateOpt',
    'communicationStateEnum'
  ])
  const columns: TableColumnProps<InfoValuesType>[] = [
    {
      label: '设备名称',
      prop: 'name',
      minWidth: 160,
      showOverflowTooltip: true
    },
    {
      label: '设备编号',
      prop: 'code',
      minWidth: 160,
      showOverflowTooltip: true
    },
    {
      label: '通信时间',
      prop: 'reportTime',
      minWidth: 160
    },
    {
      label: '通信状态',
      prop: 'onlineState',
      minWidth: 160,
      showOverflowTooltip: true,
      enumValues: equipmentState.communicationStateEnum,
      render: (option, value) => (
        <ColorfulBadge
          value={value}
          enumKey={option.row.onlineState as unknown as number}
          options={{ success: 1, info: 0, warning: 2 }}
        />
      )
    }
  ]

  //  返回
  const goBack = () => {
    router.go(-1)
  }
  // 清空搜索
  const clearSearchTable = async () => {
    setTimeout(() => {
      proSaasTableRef.value!?.toSearch()
    }, 100)
  }

  return () => {
    // 日期变时 搜索
    const props = {
      onChange: () => {
        setTimeout(() => {
          proSaasTableRef.value!?.toSearch()
        }, 100)
      }
    }
    const { deviceId } = router.currentRoute.value.query
    return (
      <ElCard class={styles['info-card']}>
        <ElSpace class={styles['info-tab-option-btns']}>
          <ElButton text type="primary" onClick={goBack}>
            返回上一级&nbsp;
            <AliIcon type="icon-fanhuishangyiji" />
          </ElButton>
        </ElSpace>
        <div style="height: 30px;"></div>
        <ProSaasTable<InfoValuesType>
          ref={proSaasTableRef}
          columns={columns}
          dispatchType="report/DeviceListPageInfoGet"
          searchParams={{
            deviceId,
            beginTime: formValues.times?.[0],
            endTime: formValues.times?.[1]
          }}
          searchFormProps={{
            model: formValues
          }}
          searchformResponsiveCol={[
            <ElFormItem key="onlineState" prop="onlineState">
              <ElSelect
                v-model={formValues.onlineState}
                clearable
                placeholder="通信状态"
                onChange={clearSearchTable}
              >
                {equipmentState.communicationStateOpt?.value?.map(
                  (item: fnStateEnum) =>
                    item?.dictValue !== '未激活' && (
                      <ElOption key={item?.dictKey} label={item?.dictValue} value={item?.dictKey} />
                    )
                )}
              </ElSelect>
            </ElFormItem>,
            <ElFormItem key="times" prop="times">
              <ElDatePicker
                v-model={formValues.times}
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                type="datetimerange"
                {...props}
              />
            </ElFormItem>
          ]}
        />
      </ElCard>
    )
  }
})
